<template>
	<div class="home">
		<van-sticky>
			<nav-bar />
		</van-sticky>
		<!-- tabs -->
		<van-tabs
			v-model="active" 
			sticky 
			offset-top="2.8125rem" 
			color="#fb7299" 
			title-active-color="#fb7299"
			lazy-render
			swipeable
			@change="changedCategory"
		>
			<!-- tab -->
		  <van-tab 
				v-for="(item,index) in categoryData" 
				:title="item.title"
				:key="index"
			>
				<!-- 下拉加载组件 -->
				<van-list 
					v-model="item.loading"
					:finished="item.finished"
					:immediate-check="false"
					offset="0"
					finished-text="我是有底线的"
					@load="loadMore"
				>
					<!-- card -->
					<card>
						<card-item
							v-for="(categoryItem,categoryIndex) in item.list" 
							:key="categoryIndex"
							:data="categoryItem"
						/>
					</card>
				</van-list>
				
		  </van-tab>
			
			<!-- slot -->
			<template #nav-right>
				<div class="nav-right" @click="$router.push({name: 'Editcategory'})">
					<van-icon name="setting-o" color="#646566" size="22" />
				</div>
			</template>
			
		</van-tabs>
	</div>
</template>

<script>
	import { getUserInfo, getCategory, getArticle } from '@/api'
	import NavBar from '@/components/common/NavBar.vue'
	import Card from '@/components/common/Card.vue'
	import CardItem from '@/components/common/CardItem.vue'
	export default {
		name: 'Home',
		data() {
			return {
				// 用户信息对象
				userInfo: {},
				// tabs默认下标
				active: 0,
				// 分类信息数组
				categoryData: []
				
			}
		},
		created() {
			this._getUserInfo()
		},
		activated() {
			const myCategoryData = JSON.parse(window.localStorage.getItem('myCategoryData'))
			// 查看是否有缓存
			if (!myCategoryData) return this._getCategory()
			
			// 遍历数据,添加一个list空数组/page当前页/pagesize条数
			const data = myCategoryData.map(item => {
				item.list = []
				item.page = 0
				item.pagesize = 10
				item.loading = false
				item.finished  = false
				return item
			})
			this.categoryData = data
		},
		methods: {
			// 获取用户信息
			_getUserInfo() {
				const id = window.localStorage.getItem('id')
				// 判断是否登录
				if (!id) return
				// 发送请求
				getUserInfo(id)
				.then(({data: res}) => {
					console.log('获取用户信息',res[0])
					this.userInfo = res[0]
				})
				.catch(err => {
					this.$toast.fail('请求失败,请重新尝试!')
				})
			},
			// 获取分类信息
			_getCategory() {
				// 发送请求
				getCategory()
				.then(res => {
					console.log('分类信息',res)
					// 判断状态码
					if (res.status !== 200) return this.$toast.fail('请求异常,请重新尝试!')
					// 遍历数据,添加一个list空数组/page当前页/pagesize条数
					const data = res.data.map(item => {
						item.list = []
						item.page = 0
						item.pagesize = 10
						item.loading = false
						item.finished  = false
						return item
					})
					this.categoryData = data
					this.over = true
				})
				.catch(err => {
					this.$toast.fail('请求异常,请重新尝试!')
				})
			},
			// 切换tab回调函数
			changedCategory(name,title) {
				// name 对应 this.active
				const item = this.categoryData[name]
				this._getArticle(item)
			},
			// 获取文章数据
			_getArticle(item) {
				const id = item._id,
				params = {
					page: item.page,
					pagesize: item.pagesize
				}
				getArticle(id,params)
				.then(res => {
					console.log('文章列表',res)
					// 获取原有数据
					const oldData = item.list || []
					item.list = [...oldData,...res.data]
					
					// 判断数据条数
					if (res.data.length < item.pagesize) {
						// 小于10条说明没数据了，禁用滚动加载事件
						item.finished = true
					} else {
						// 否则说明还有数据，loading设置为false表示还有数据
						item.loading = false
					}
					
				})
				.catch(err => {
					this.$toast.fail('请求异常,请重新尝试!')
				})
			},
			// 向下滚动加载更多时间
			loadMore() {
				this.categoryData[this.active].page += 1
				this._getArticle(this.categoryData[this.active])
			}
		},
		components: {
			NavBar,
			Card,
			CardItem
		},
		watch: {
			categoryData() {
				this.$nextTick(() => {
					this._getArticle(this.categoryData[this.active])
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.home {
		background-color: #fff;
	}
	
	.van-tabs{
		/deep/ .van-tabs__nav{
			margin-right: 44px;
			.nav-right{
				background-color: #fff;
				position: fixed;
				right: 0;
				height: 44px;
				width: 44px;
				display: flex;
				align-items: center;
				justify-content: center;
				z-index: 9999;
			}
		}
	}
</style>